{% extends "base/base.html" %}

{% block title %}考勤管理 - 项目合作归属数据管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-clock"></i> 考勤管理</h2>
        <p class="text-muted">管理项目负责人的进出公司情况，支持批量导入和统计分析</p>
    </div>
</div>

<!-- 搜索表单 -->
<div class="search-form">
    <form method="GET" class="row g-3">
        <div class="col-md-4">
            <label class="form-label">员工姓名</label>
            <select class="form-select" name="search_name">
                <option value="">全部员工</option>
                {% for staff in staff_names %}
                <option value="{{ staff }}" {% if search_name == staff %}selected{% endif %}>{{ staff }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">日期</label>
            <input type="date" class="form-control" name="search_date" value="{{ search_date }}">
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <button type="submit" class="btn btn-primary me-2">
                <i class="bi bi-search"></i> 搜索
            </button>
            <a href="{{ url_for('attendance.attendance_management') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-clockwise"></i> 重置
            </a>
        </div>
    </form>
</div>

<!-- 操作工具栏 -->
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#uploadAttendanceModal">
                    <i class="bi bi-cloud-upload"></i> 批量上传考勤
                </button>
            </div>
            <div>
                <a href="{{ url_for('attendance.download_attendance_template') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-file-earmark-excel"></i> 下载模板
                </a>
                <a href="{{ url_for('attendance.export_attendance', search_name=request.args.get('search_name', ''), search_date=request.args.get('search_date', '')) }}" class="btn btn-outline-primary">
                    <i class="bi bi-download"></i> 导出考勤
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 考勤统计卡片 -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ attendances.total or 0 }}</h4>
                        <p class="mb-0">总记录数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-clock-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>-</h4>
                        <p class="mb-0">今日在公司人数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-people-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>-</h4>
                        <p class="mb-0">本月驻点天数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-calendar-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>-</h4>
                        <p class="mb-0">平均工作时长</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-stopwatch-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 考勤记录列表 -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>员工姓名</th>
                        <th>所属项目</th>
                        <th>事件类型</th>
                        <th>事件时间</th>
                        <th>日期</th>
                        <th>是否驻点</th>
                    </tr>
                </thead>
                <tbody>
                    {% for attendance in attendances.items %}
                    <tr>
                        <td>{{ loop.index + (attendances.page - 1) * attendances.per_page }}</td>
                        <td>{{ attendance.staff_name }}</td>
                        <td>{{ attendance.project_name or '-' }}</td>
                        <td>
                            {% if attendance.event_type == '进门' %}
                                <span class="badge bg-success">进门</span>
                            {% else %}
                                <span class="badge bg-warning">出门</span>
                            {% endif %}
                        </td>
                        <td>{{ attendance.event_time.strftime('%H:%M:%S') if attendance.event_time else '-' }}</td>
                        <td>{{ attendance.event_time.strftime('%Y-%m-%d') if attendance.event_time else '-' }}</td>
                        <td>
                            {% if attendance.is_resident %}
                                <span class="badge bg-info">是</span>
                            {% elif attendance.is_resident == False %}
                                <span class="badge bg-secondary">否</span>
                            {% else %}
                                <span class="badge bg-light text-dark">未知</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            暂无考勤记录
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 分页 -->
{% if attendances.pages > 1 %}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        {% if attendances.has_prev %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('attendance.attendance_management', page=attendances.prev_num, search_name=search_name, search_date=search_date) }}">上一页</a>
        </li>
        {% endif %}
        
        {% for page_num in attendances.iter_pages() %}
            {% if page_num %}
                {% if page_num != attendances.page %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('attendance.attendance_management', page=page_num, search_name=search_name, search_date=search_date) }}">{{ page_num }}</a>
                </li>
                {% else %}
                <li class="page-item active">
                    <span class="page-link">{{ page_num }}</span>
                </li>
                {% endif %}
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">…</span>
                </li>
            {% endif %}
        {% endfor %}
        
        {% if attendances.has_next %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('attendance.attendance_management', page=attendances.next_num, search_name=search_name, search_date=search_date) }}">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

<!-- 批量上传考勤模态框 -->
<div class="modal fade" id="uploadAttendanceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量上传考勤数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('attendance.upload_attendance') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">选择Excel文件</label>
                        <input type="file" class="form-control" name="upload_file" accept=".xlsx,.xls" required>
                        <div class="form-text">支持.xlsx和.xls格式，请按照模板格式准备数据</div>
                    </div>
                    <div class="alert alert-info">
                        <h6>模板包含字段：</h6>
                        <ul class="mb-0">
                            <li>时间（格式：YYYY-MM-DD HH:MM:SS）</li>
                            <li>人员名称</li>
                            <li>所属项目（可简略，系统会自动匹配）</li>
                            <li>事件类型（进门/出门）</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">上传</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 导出功能已直接使用URL链接，无需JavaScript函数
</script>
{% endblock %}
